import React, { Component } from "react";
import { observer } from "mobx-react";
import "../../styles/appleBasket.scss";
import AppleItem from "./appitem";
class Apple extends Component {
  /**  计算当前已吃和未吃苹果的状态*/
  calculateStatus() {
    let status = {
      appleNow: {
        quantity: 0,
        weight: 0,
      },
      appleEaten: {
        quantity: 0,
        weight: 0,
      },
    };
    this.props.store.apples.forEach((apple) => {
      let selector = apple.isEaten ? "appleEaten" : "appleNow";
      status[selector].quantity++;
      status[selector].weight += apple.weight;
    });
    return status;
  }
  getAppleItem() {
    let data = [];
    console.log(this.props.store);
    this.props.store.apples.forEach((apple) => {
      if (!apple.isEaten) {
        data.push(
          <AppleItem
            eatApple={this.props.store.eatApple}
            apple={apple}
            key={apple.id}
          />
        );
      }
    });
    if (!data.length) return <div>篮子已经空了</div>;
    return data;
  }
  render() {
    let { actions, apples, isPicking } = this.props;
    console.log(this.props.store.buttonText);
    let AppStatus = this.calculateStatus();
    let {
      appleNow: { quantity: notEatenQuantity, weight: notEatenWeight },
      appleEaten: { quantity: EatenQuantity, weight: EatenWeight },
    } = AppStatus;
    return (
      <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">
              {notEatenQuantity}个苹果，{notEatenWeight}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">
              {EatenQuantity}个苹果，{EatenWeight}克
            </div>
          </div>
        </div>

        <div className="appleList">{this.getAppleItem()}</div>

        <div className="btn-div">
          <button
            className={isPicking ? "disabled" : ""}
            onClick={() => this.props.store.pickApple()}
          >
            {this.props.store.buttonText}
          </button>
        </div>
      </div>
    );
  }
}

export default observer(Apple);
